<template>
  <div>
    <ol class="breadcrumb">
      <li><router-link to="/">首页</router-link></li>
      <li><a href="#">管理</a></li>
      <li class="active">专业管理</li>
    </ol>

    <form class="form-inline" onsubmit="return false">
      <div class="form-group">
        <input
          type="search"
          class="form-control"
          placeholder="请输入搜索的内容"
          v-model="query"
          @keyup.13="querytxt()"
        />
      </div>
      <button type="button" @click="querytxt" class="btn btn-default">搜索</button>
      <button type="button" class="btn btn-success" @click="add">
        添加专业
      </button>
    </form>
    <hr />

    <!-- 数据展示 -->
    <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>专业名称</th>
          <th>备注</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="m in majors" :key="m.id">
          <td>{{ m.id }}</td>
          <td>{{ m.text }}</td>
          <td>{{ m.desc }}</td>
          <td>
            <button class="btn btn-info" @click="update(m.id)">修改</button>
            <button class="btn btn-danger" @click="del(m.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <p v-if="majors.length==0">没有查询到你需要的数据...</p>
  </div>
</template>
<script>
import add from "./major/add.vue";
import update from "./major/update.vue";

export default {
  data() {
    return {
      majors: [],
      query:''
    };
  },
  mounted() {
    //加载完节点后执行
    this.initData();
  },
  methods: {
    initData() {
      this.$http
        .get("majors")
        .then((rs) => {
          this.majors = rs.data; //将返回的数据赋值给自身组件的data属性中
        })
        .catch((err) => {
          if (err) {
            console.err(err);
          }
        });
    },
    querytxt(){
      // console.log(this.query);
      this.$http.get("majors?q="+this.query).then(rs=>{
        this.majors = rs.data
      })
    },
    add() {
      this.$layer.iframe({
        content: {
          content: add, //传递的组件对象
          parent: this, //当前的vue对象
          data: { id: 6666 }, //props
        },
        area: ["400px", "300px"],
        title: "添加专业",
        cancel: () => {
          //关闭事件
          this.$layer.msg("关闭iframe");
        },
      });
    },
    del(id) {
      this.$layer.confirm(
        "确定删除吗?",
        (layerid) => {
          this.$http.delete("majors/" + id).then((rs) => {
            if (rs.status == 200){
              this.$layer.msg("删除成功!")
              this.initData();
            }
          });
          this.$layer.close(layerid); //关闭当前弹窗
        },
        (layerid) => {
          this.$layer.close(layerid);
          //关闭当前弹窗
        }
      );
    },
    update(id){
      this.$layer.iframe({
        content: {
          content: update, //传递的组件对象
          parent: this,//当前的vue对象
          data:{id}//props
        },
        area:['400px','300px'],
        title: '修改专业',
        cancel:()=>{//关闭事件
          this.$layer.msg('关闭了..');
        }
      });
    }
  },
};
</script>
<style lang="less" scoped>
.table {
  button {
    margin-right: 10px;
  }
}
</style>